<template>
  <div class="container">
    <div style="">
      <div class="content_box">
        <div style="width: 47%;">
          <p>糖尿病合并症服务前</p>
          <div
            class="card_content"
            v-if="archiveFirst.hypertensionText !== null && archiveFirst.hypertensionText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">高血压病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.hypertensionDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24">{{ archiveFirst.hypertensionData.split(',')[0] }}</a-col>
                <a-col class="item" :span="24">{{ archiveFirst.hypertensionData.split(',')[1] }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.hyperlipidemiaText !== null && archiveFirst.hyperlipidemiaText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">高脂血症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.hypertriglyceridemiaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24">{{ archiveFirst.ifHypolipidemic1 }}</a-col>
              </a-row>
            </div>
          </div>
          <!-- <div class="card_content" v-if="archiveFirst.hyperlipidemiaText !== null&&report.other !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">高胆固醇血症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.hypercholesterolemiaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">{{ archiveFirst.ifHypolipidemic2 }}</a-col>
              </a-row>
            </div>
          </div> -->
          <div
            class="card_content"
            v-if="archiveFirst.angiocardiopathyText !== null && archiveFirst.angiocardiopathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">心血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveFirst.angiocardiopathyDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-for="item in archiveFirst.angiocardiopathyExam.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.cerebrovascularText !== null && archiveFirst.cerebrovascularText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">脑血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item">脑卒中类型： {{ archiveFirst.strokeType }}</a-col>
                <a-col class="item" v-if="archiveFirst.strokeDate !== null && archiveFirst.strokeDate !== '——'"
                  >脑卒中确诊日期： {{ archiveFirst.strokeDate }}</a-col
                >
                <a-col class="item" v-if="archiveFirst.ischemiaDate !== null && archiveFirst.ischemiaDate !== '——'"
                  >急性脑缺血确诊日期： {{ archiveFirst.ischemiaDate }}</a-col
                >
                <a-col
                  class="item"
                  v-if="archiveFirst.transientIschemiaDate !== null && archiveFirst.transientIschemiaDate !== '——'"
                >
                  短暂性脑缺血发作确诊日期： {{ archiveFirst.transientIschemiaDate }}
                </a-col>
                <a-col class="item" v-if="archiveFirst.ccvdDate !== null && archiveFirst.ccvdDate !== '——'"
                  >动脉粥样硬化性CCVD确诊日期： {{ archiveFirst.ccvdDate }}</a-col
                >
                <a-col class="item">其他脑血管疾病： {{ archiveFirst.cerebrovascularOther }}</a-col>
                <a-col class="item">脑血管疾病相关检查： {{ archiveFirst.cerebrovascularCheck }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.peripheralText !== null && archiveFirst.peripheralText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">周围血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" v-if="archiveFirst.arteryDate !== null && archiveFirst.arteryDate !== '——'"
                  >外周动脉疾病确诊日期： {{ archiveFirst.arteryDate }}</a-col
                >
                <a-col class="item" v-if="archiveFirst.aneurysmDate !== null && archiveFirst.aneurysmDate !== '——'"
                  >动脉瘤确诊日期： {{ archiveFirst.aneurysmDate }}</a-col
                >
                <a-col class="item" v-if="archiveFirst.fistulaDate !== null && archiveFirst.fistulaDate !== '——'"
                  >动静脉瘘确诊日期： {{ archiveFirst.fistulaDate }}</a-col
                >
                <a-col class="item" v-if="archiveFirst.venousDate !== null && archiveFirst.venousDate !== '——'"
                  >外周静脉疾病确诊日期： {{ archiveFirst.venousDate }}</a-col
                >
                <a-col class="item" v-if="archiveFirst.injuryDate !== null && archiveFirst.injuryDate !== '——'"
                  >周围血管损伤确诊日期： {{ archiveFirst.injuryDate }}</a-col
                >
                <a-col class="item">周围血管疾病类型： {{ archiveFirst.peripheralType }}</a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>糖尿病合并症服务后</p>
          <div
            class="card_content"
            v-if="archiveSummary.hypertensionText !== null && archiveSummary.hypertensionText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">高血压病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.hypertensionDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24">{{ archiveSummary.hypertensionData.split(',')[0] }}</a-col>
                <a-col class="item" :span="24">{{ archiveSummary.hypertensionData.split(',')[1] }}</a-col>
              </a-row>
            </div>
          </div>
          <!-- <div class="card_content" v-if="archiveSummary.hyperlipidemiaText !== null&&report.other !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">高甘油三酯血症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.hypertriglyceridemiaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="24">{{ archiveSummary.ifHypolipidemic1 }}</a-col>
              </a-row>
            </div>
          </div> -->
          <!-- <div class="card_content" v-if="archiveSummary.hyperlipidemiaText !== null&&report.other !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">高胆固醇血症</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.hypercholesterolemiaDate }}</div>
            <div>
              <a-row>
                <a-col class="item" :span="12">{{ archiveSummary.ifHypolipidemic2 }}</a-col>
              </a-row>
            </div>
          </div> -->
          <div
            class="card_content"
            v-if="archiveSummary.angiocardiopathyText !== null && archiveSummary.angiocardiopathyText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">心血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div class="item">确诊日期：{{ archiveSummary.angiocardiopathyDate }}</div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-for="item in archiveSummary.angiocardiopathyExam.split(';')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.cerebrovascularText !== null && archiveSummary.cerebrovascularText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">脑血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item">脑卒中类型： {{ archiveSummary.strokeType }}</a-col>
                <a-col class="item" v-if="archiveSummary.strokeDate !== null && archiveSummary.strokeDate !== '——'"
                  >脑卒中确诊日期： {{ archiveSummary.strokeDate }}</a-col
                >
                <a-col class="item" v-if="archiveSummary.ischemiaDate !== null && archiveSummary.ischemiaDate !== '——'"
                  >急性脑缺血确诊日期： {{ archiveSummary.ischemiaDate }}</a-col
                >
                <a-col
                  class="item"
                  v-if="archiveSummary.transientIschemiaDate !== null && archiveSummary.transientIschemiaDate !== '——'"
                >
                  短暂性脑缺血发作确诊日期： {{ archiveSummary.transientIschemiaDate }}
                </a-col>
                <a-col class="item" v-if="archiveSummary.ccvdDate !== null && archiveSummary.ccvdDate !== '——'"
                  >动脉粥样硬化性CCVD确诊日期： {{ archiveSummary.ccvdDate }}</a-col
                >
                <a-col class="item">其他脑血管疾病： {{ archiveSummary.cerebrovascularOther }}</a-col>
                <a-col class="item">脑血管疾病相关检查： {{ archiveSummary.cerebrovascularCheck }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.peripheralText !== null && archiveSummary.peripheralText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">周围血管疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" v-if="archiveSummary.arteryDate !== null && archiveSummary.arteryDate !== '——'"
                  >外周动脉疾病确诊日期： {{ archiveSummary.arteryDate }}</a-col
                >
                <a-col class="item" v-if="archiveSummary.aneurysmDate !== null && archiveSummary.aneurysmDate !== '——'"
                  >动脉瘤确诊日期： {{ archiveSummary.aneurysmDate }}</a-col
                >
                <a-col class="item" v-if="archiveSummary.fistulaDate !== null && archiveSummary.fistulaDate !== '——'"
                  >动静脉瘘确诊日期： {{ archiveSummary.fistulaDate }}</a-col
                >
                <a-col class="item" v-if="archiveSummary.venousDate !== null && archiveSummary.venousDate !== '——'"
                  >外周静脉疾病确诊日期： {{ archiveSummary.venousDate }}</a-col
                >
                <a-col class="item" v-if="archiveSummary.injuryDate !== null && archiveSummary.injuryDate !== '——'"
                  >周围血管损伤确诊日期： {{ archiveSummary.injuryDate }}</a-col
                >
                <a-col class="item">周围血管疾病类型： {{ archiveSummary.peripheralType }}</a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Comorbidity',
  props: ['archiveFirst', 'archiveSummary'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }

@media print {
  .container {
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
</style>

